<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout class="mylayouts">
            <div slot="center">

                <a-descriptions :layout="'vertical'">
                    <a-descriptions-item :label="i18n('isMsg.label1','1,在开发中使用')">
                        <div  v-html="strDoQuery"> </div>
                    </a-descriptions-item>
                </a-descriptions>

                <a-descriptions :layout="'vertical'">
                    <a-descriptions-item :label="i18n('isMsg.label2','2,在表单中使用')">
                        <div  v-html="strForm"> </div>
                    </a-descriptions-item>
                </a-descriptions>

                <a-descriptions :layout="'vertical'">
                    <a-descriptions-item :label="i18n('isMsg.label3','3，在列表中使用')">
                        <div  v-html="strList"> </div>
                    </a-descriptions-item>
                </a-descriptions>

                <a-descriptions :layout="'vertical'">
                    <!--style="display: flex;align-items:center;justify-content: center;"-->
                    <a-descriptions-item :label="$ti18('rxForm.notes','备注')">
                        {{i18n('isMsg.msg8','如果是in操作的参数的格式,如:')}}{"fieldName":"value1,value2"},<br/>
                        {{i18n('isMsg.msg9','between操作的参数格式,如')}}{"fieldName":"value1|value2"}
                    </a-descriptions-item>
                </a-descriptions>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
    import FormCustomQueryApi from '@/api/form/core/formCustomQuery'
    import {Util,RxDialog,RxLayout} from "@lowcode/jpaas-common-lib";
    export default {
        name: "FormCustomQueryHelp",
        props:["pkId","layerid","destroy"],
        components: {
            RxDialog,
            RxLayout
        },
        data(){
            return {
                confirmLoading: false,
                strList :"",
                strForm:"",
                strDoQuery:""
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"formCustomQuery",key);
            },
            cancel(){
                Util.closeWindow(this,"cancel");
            },
            handleSubmit(){
                Util.closeWindow(this,"ok");
            },
            loadData(){
                if(!this.pkId){
                    return;
                }
                this.confirmLoading = true;
                FormCustomQueryApi.preview(this.pkId).then (res => {
                    this.confirmLoading = false;
                    if(res.success && res.code==200) {
                        var self_  = this;
                        var data=res.data;
                        var whereField = self_.getWhereField(JSON.parse(data.whereField));
                        var resultField = self_.getResultField(JSON.parse(data.resultField));

                        var strDoQuery = `
              <span>`+ this.i18n('isMsg.msg1','在开发页面中引入') +`import FormCustomQueryApi from '@/api/form/core/formCustomQuery,` + this.i18n('isMsg.msg2','使用如下') + `<br/></span>
               /** <br/>
                ${whereField.strTmp}
                <br/> */<br/>
                FormCustomQueryApi.doQuery("${data.key}",
                    ${JSON.stringify(whereField.tmp)}).then(res=>){<br/>
                     //`+ this.i18n('isMsg.msg10','数据') +`
                     data = res.data;<br/>
                     // data :["${resultField}"]

                }`;

                        var strForm = `
              <span>
              `+ this.i18n('isMsg.msg3','使用案列:唯一性验证，下来框填充，触发显值等') +`<br/>
              `+ this.i18n('isMsg.msg4','提供线上文档供亲参考:') +`<a href="#" @click="ToFrom()">http://doc.redxun.cn/docs/jpaas/bindDs</a><br/>
              </span><br/>
               /** <br/>
                ${whereField.strTmp}
                <br/> */<br/>
                this.invokeCustomQuery("${data.key}",
                    ${JSON.stringify(whereField.tmp)},
                function(data){<br/>
                  //`+ this.i18n('isMsg.msg5','返回的数据') +`
                  data:["${resultField}"]
                <br/>})`;

                        var strList = `
              <span>
               `+ this.i18n('isMsg.msg6','使用案列:在列表中增加自定义查询按钮,供查询扩展使用;') +`<br/>
              `+ this.i18n('isMsg.msg7','提供线上文档供亲参考:') +`<a href="#" @click="ToList()">http://doc.redxun.cn/docs/jpaas/invokeCustomQueryList</a><br/>
              </span><br/>
               /** <br/>
                ${whereField.strTmp}
                <br/> */<br/>
                this.invokeCustomQuery("${data.key}",
                    ${JSON.stringify(whereField.tmp)},
                function(data){<br/>
                  //`+ this.i18n('isMsg.msg5','返回的数据') +`
                  data:["${resultField}"]
                <br/>})`;


                        this.strDoQuery = strDoQuery;
                        this.strForm = strForm;
                        this.strList = strList;
                    }
                })
            },

            //获取自定义查询返回字段
            getResultField(ary){
                var str="{";
                for (var i = 0; ary && i < ary.length; i++) {
                    if(i>0){
                        str+=",";
                    }
                    var obj = ary[i];
                    str+=obj.fieldName;
                }
                str+="}";
                return str;
            },

            //获取自定义查询条件字段
            getWhereField(ary){
                var tmp = {};
                var strTmp = " * @param ";
                for (var i = 0; ary && i < ary.length; i++) {
                    var obj = ary[i];
                    var paramType = obj.columnType;
                    strTmp += obj.fieldName + " " + paramType+ "\n";
                    tmp[obj.fieldName] = "";
                }
                return {
                    tmp: tmp,
                    strTmp: strTmp
                };
            },
            ToList(){   //链接外部使用文档
                var url ="http://doc.redxun.cn/docs/jpaas/invokeCustomQueryList";
                window.open(url);
            },
            ToForm(){
                var url ="http://doc.redxun.cn/docs/jpaas/bindDs";
                window.open(url);
            },
        }


    }
</script>

<style scoped>
    .mylayouts >>> .ant-descriptions-item > span.ant-descriptions-item-label{
        font-weight: bold;
    }
</style>